//获取地震中心点,并将地震地图中心点移动至该中心点位
function haveCenter(id) {
	n2.ajax.post('http://' + n2.billId, {
		"kind_code": "01",
		"product_code": "0001",
		"id": id
	}, 'json').then(function(res) {
		var res = JSON.parse(res);
		map.setView([res.lat, res.lon], 7);
		var happenTime = res.disaster_happendate;
		var strHTML = "<span style='font-weight:bolder;font-size:14px'>" + res.name + "</span><br>" +
			"发震时刻：" + happenTime.substr(0, happenTime.length - 5).replace(/T/g, "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;") + "<br>" +
			"纬度：" + res.lat + "<br>" +
			"经度：" + res.lon + "<br>" +
			"深度：" + res.deep + "<br>" +
			"震级：" + res.mag + "<br>" +
			"震中海拔：" + res.elevation;
		var marker = new L.marker([res.lat, res.lon]).addTo(map).bindPopup(strHTML).openPopup();
	});
}
//获取二级页面标题及信息
function haveTitle(id) {
	n2.ajax.post('http://' + n2.titleId, {
		"kind_code": "01",
		"product_code": "0001",
		"id": id
	}, 'json').then(function(res) {
		var res = JSON.parse(res);
		var titlePublic = $('.title-public');
		var contentEarthquake = $('.content-earthquake');
		titlePublic.html(res[0].name);
		contentEarthquake.html(res[0].basicInfo); 
		var scrollHeight = contentEarthquake.outerHeight() + titlePublic.outerHeight() + 10;
		//给首页scoll定高
		$('.mui-scroll-wrapper1').css("height", scrollHeight > 157 ? 157 : scrollHeight);
		mui('.mui-scroll-wrapper1').scroll(scrollOption);
	});
}
//获取周边县
function getcountrys(id) {
	n2.ajax.post('http://' + n2.getcountrys, {
		"kind_code": "01",
		"product_code": "0006",
		"id": id
	}, 'json').then(function(res) {
		var res = JSON.parse(res);
		console.log(res);
		var surroundingtowns = $('.surroundingtowns');
		var html = "";
		for(var i = 0; i < res[0]['conutrys'].length; i++) {
			html += '<div class="flex-box">' +
				'<div class="first-item">' + res[0]['conutrys'][i].city + '</div>' +
				'<div class="second-item">' + toRoman(res[0]['conutrys'][i].Intensity) + '</div>' +
				'<div class="third-item">' + res[0]['conutrys'][i].distance + '</div>' +
				'</div>';
		}
		surroundingtowns.html(html);
	});
}
//获取周边乡
function gettowns(id) {
	n2.ajax.post('http://' + n2.getTowns, {
		"kind_code": "01",
		"product_code": "0007",
		"id": id
	}, 'json').then(function(res) {
		var res = JSON.parse(res);
		//		console.log(res);
		var surroundingcountry = $('.surroundingcountry');
		var html = "";
		for(var i = 0; i < res[0]['towns'].length; i++) {
			html += '<div class="flex-box">' +
				'<div class="first-item">' + res[0]['towns'][i].city + '</div>' +
				'<div class="second-item">' + toRoman(res[0]['towns'][i].Intensity) + '</div>' +
				'<div class="third-item">' + res[0]['towns'][i].distance + '</div>' +
				'</div>';
		}
		surroundingcountry.html(html);
	});
}
//获取周边道路
function getRoads(id) {
	n2.ajax.post('http://' + n2.getRoads, {
		"kind_code": "01",
		"product_code": "0008",
		"id": id
	}, 'json').then(function(res) {
		var res = JSON.parse(res);
		//		console.log(res);
		var surroundingroad = $('.surroundingroad');
		var html = "";
		for(var i = 0; i < res[0]['rodes'].length; i++) {
			html += '<div class="flex-box">' +
				'<div class="first-item">' + res[0]['rodes'][i].city + '</div>' +
				'<div class="second-item">' + toRoman(res[0]['rodes'][i].Intensity) + '</div>' +
				'<div class="third-item">' + res[0]['rodes'][i].distance + '</div>' +
				'</div>';
		}
		surroundingroad.html(html);
	});
}
//获取灾区人口
function getAffectedPop(id) {
	n2.ajax.post('http://' + n2.getAffectedPop, {
		"kind_code": "01",
		"product_code": "0012",
		"id": id
	}, 'json').then(function(res) {
		var res = JSON.parse(res);
		//		console.log(res);
		var affectedpop = $('.affectedpop');
		var html = "";
		for(var i = 0; i < res[0]['AffectedPop'].length; i++) {
			html += '<div class="flex-box">' +
				'<div class="first-item">' + toRoman(res[0]['AffectedPop'][i].intensity) + '</div>' +
				'<div class="second-item">' + res[0]['AffectedPop'][i].AffectedPop + '</div>' +
				'<div class="third-item">' + res[0]['AffectedPop'][i].country + '</div>' +
				'</div>';
		}
		affectedpop.html(html);
	});
}
//获取灾区房屋
function getAffectedHouse(id) {
	n2.ajax.post('http://' + n2.getAffectedHouse, {
		"kind_code": "01",
		"product_code": "0014",
		"id": id
	}, 'json').then(function(res) {
		var res = JSON.parse(res);
		//		console.log(res);
		var affectedhouse = $('.affectedhouse');
		var html = "";
		for(var i = 0; i < res[0]['AffectedHouse'].length; i++) {
			html += '<div class="flex-box">' +
				'<div class="first-item">' + toRoman(res[0]['AffectedHouse'][i].intensity) + '</div>' +
				'<div class="second-item">' + res[0]['AffectedHouse'][i].AffectedHouse + '</div>' +
				'<div class="third-item">' + res[0]['AffectedHouse'][i].country + '</div>' +
				'</div>';
		}
		affectedhouse.html(html);
	});
}

//获取地方上报灾情

function getLocalReport(id) {
	n2.ajax.post('http://' + n2.getLocalReport, {
		"kind_code": "01",
		"product_code": "0015",
		"id": id
	}, 'json').then(function(res) {
//		console.log(res);
		var res = JSON.parse(res);
		var localreport = $('.assessbuilding');
		var html = "";
		var html1 = "";
		var arr = [];
		var options = [];
		for(var i = 0; i < res[0]['LocalBuildingReport'].length; i++) {
			if(res[0]['LocalBuildingReport'][i].lat) {
				html += '<div class="flex-box">' +
					'<div class="first-item">' + res[0]['LocalBuildingReport'][i].country + '</div>' +
					'<div class="second-item">' + res[0]['LocalBuildingReport'][i].collapsed + '</div>' +
					'<div class="third-item">' + res[0]['LocalBuildingReport'][i].severeDamage + '</div>' +
					'<div class="fourth-item">' + res[0]['LocalBuildingReport'][i].generalDamege + '</div>' +
					'</div>';

				var obj = {
					"lat": res[0]['LocalBuildingReport'][i].lat,
					"lon": res[0]['LocalBuildingReport'][i].lon
				};
				arr.push(obj);

				// 指定的数据2
				var option = {
					title : {
				        text: res[0]['LocalBuildingReport'][i].country,
				        x:'center'
				    },
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					series: [{
						name: '地方上报',
						type: 'pie',
						radius: '55%',
						center: ['50%', '60%'],
						
						data: [{
								value: res[0]['LocalBuildingReport'][i].collapsed,
								name: '倒损(间)'
							},
							{
								value: res[0]['LocalBuildingReport'][i].severeDamage,
								name: '严重损坏(间)'
							}, 
							{
								value: res[0]['LocalBuildingReport'][i].generalDamege,
								name: '一般损坏(间)'
							}
						],
						itemStyle: {
							emphasis: {
								show: false,
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};

				options.push(option);
			}
		}
		console.log("2222");

		var myChart = [];

		for(var k = 0; k < arr.length; k++) {
			//			if (myChart[k] && myChart[k].dispose) { 
			//	            myChart[k].dispose(); 
			//	        } 
			var mychart = document.getElementById('marker' + k);
			myChart[k] = echarts.init(mychart);
		}

		//饼图点击	事件地图居中

		for(var s = 0; s < myChart.length; s++) {

			(function(s) {
				myChart[s].on("click", function eConsole(param) {
					console.log("居中");
					map.setView([arr[s].lat, arr[s].lon], 10);
				})
			})(s);
		}

		console.log("2222");
		//加载图例
		//		var echartsSymbol = L.control({
		//			position: 'bottomright'
		//		});               
		//		echartsSymbol.onAdd = function(map) { //onAdd函数向其中添加组件
		//
		//			var div = L.DomUtil.create('div', 'echartssymbol'),
		//				echartscolor = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];
		//
		//			// loop through our density intervals and generate a label with a colored square for each interval
		//			for(var i = 0; i < options[0].series[0].data.length; i++) {
		//				div.innerHTML +=
		//					'<i style="background:' + echartscolor[i] + '"></i> ' +
		//					options[i].series[0].data[i].name + "&nbsp;" + '<br>';
		//			}
		//			return div;
		//		};

		//图层
		$('.leaflet-echart-icon').hide();
		$('.echartssymbol').hide();
		var state = true; //echarts类型切换的哨兵值

		//点击报告事件绑定
		document.querySelector('.btn-type3').addEventListener("touchstart", function(e) {
//			console.log("bao");
			state = false;
			document.querySelector('.distroy-house').innerHTML = '房屋倒损地方上报';

			if(!state) {
				$('#img-btn-type2').css('backgroundPosition', '-75px -82px');
				$('#img-btn-type3').css('backgroundPosition', '-112px -124px');

				//---------使用指定数据配置图像
				for(var i = 0; i < myChart.length; i++) {
					myChart[i].setOption(options[i]);
				}
			}

			e.stopPropagation();
			if(arr[0]) {
				localreport.html(html);
			} else {
				
				html1 = '<div class="flex-box">' +
					'<div class="first-item">' + 0 + '</div>' +
					'<div class="second-item">' + 0 + '</div>' +
					'<div class="third-item">' + 0 + '</div>' +
					'<div class="fourth-item">' + 0 + '</div>' +
					'</div>';
				localreport.html(html1);
			}
		});
	});
}

//获取灾区房屋评估
function getAssessBuilding(id) {
	n2.ajax.post('http://' + n2.getAssessBuilding, {
		"kind_code": "01",
		"product_code": "0015",
		"id": id
	}, 'json').then(function(res) {
		console.log(res);
		var res = JSON.parse(res);
		var assessbuilding = $('.assessbuilding');
		var html = "";
		var html1 = "";
		var arr = [];
		var Option = [];
		for(var i = 0; i < res[0]['AssessBuilding'].length; i++) {
			if(res[0]['AssessBuilding'][i].lat) {
				html += '<div class="flex-box">' +
					'<div class="first-item">' + res[0]['AssessBuilding'][i].country + '</div>' +
					'<div class="second-item">' + res[0]['AssessBuilding'][i].collapsed + '</div>' +
					'<div class="third-item">' + res[0]['AssessBuilding'][i].severeDamage + '</div>' +
					'<div class="fourth-item">' + parseInt(res[0]['AssessBuilding'][i].generalDamege) + '</div>' +
					'</div>';

				var obj = {
					"lat": res[0]['AssessBuilding'][i].lat,
					"lon": res[0]['AssessBuilding'][i].lon
				};
				arr.push(obj);

				// 指定图表的配置项和数据
				var option = {
					title : {
				        text: res[0]['AssessBuilding'][i].country,
				        x:'center'
				    },
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b}: {c} ({d}%)"
					},
					series: [{
						name: '倒损评估',
						type: 'pie',
						radius: ['20', '50'],
						avoidLabelOverlap: false,
						label: {
							normal: {
								show: false,
								position: 'center'
							},
							emphasis: {
								show: false,
								textStyle: {
									fontSize: '18',
									fontWeight: 'bold'
								}
							}
						},
						labelLine: {
							normal: {
								show: false
							}
						},
						data: [{
							value: res[0]['AssessBuilding'][i].collapsed,
							name: '倒损(间)'
						}, {
							value: res[0]['AssessBuilding'][i].severeDamage,
							name: '严重损坏(间)'
						}, {
							value: res[0]['AssessBuilding'][i].generalDamege,
							name: '一般损坏(间)'
						}]
					}]
				};

				Option.push(option);
			}
		}
		//		console.log(arr.length);
		//		console.log(Option.length);
		if(arr[0]) {
			assessbuilding.html(html);
		} else {
			html1 = '<div class="flex-box">' +
				'<div class="first-item">' + 0 + '</div>' +
				'<div class="second-item">' + 0 + '</div>' +
				'<div class="third-item">' + 0 + '</div>' +
				'<div class="fourth-item">' + 0 + '</div>' +
				'</div>';
			assessbuilding.html(html1);
		}

		for(var j = 0; j < arr.length; j++) {
			if(arr[j]) {
				var pictures = L.marker([arr[j].lat, arr[j].lon], {
					icon: L.divIcon({
						className: 'leaflet-echart-icon',
						iconSize: [160, 160],
						html: '<div id="marker' + j + '" style="width: 160px; height: 160px; position: relative; background-color: transparent;"></div>'
					})
				}).addTo(map);
			}
		}

		// 基于准备好的dom，初始化echarts实例
		var myChart = [];

		for(var k = 0; k < arr.length; k++) {
			if(arr[k]) {
				var mychart = document.getElementById('marker' + k);
				myChart[k] = echarts.init(mychart);
			}

		}
		//				console.log(myChart);

		//加载图例
		var echartsSymbol = L.control({
			position: 'topleft'
		});

		echartsSymbol.onAdd = function(map) { //onAdd函数向其中添加组件

			var div = L.DomUtil.create('div', 'echartssymbol'),
				echartscolor = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];

			// loop through our density intervals and generate a label with a colored square for each interval
			for(var i = 0; i < 1; i++) {
				if(Option[i]) {
					for(var j = 0; j < Option[0].series[0].data.length; j++){
						div.innerHTML +=
							'<i style="background:' + echartscolor[j] + '"></i> ' +
							Option[0].series[0].data[j].name + "&nbsp;" + '<br>';
					}
					
				}
			}
			return div;
		};
		if(arr[0]) {
			echartsSymbol.addTo(map);
		}
		//加入显示比例尺

		// 使用刚指定的配置项和数据显示图表。
		for(var i = 0; i < Option.length; i++) {
			if(Option[i]) {
				myChart[i].setOption(Option[i]);
			}
		}
		//点击评论事件绑定
//		console.log("ww");
		document.querySelector('.btn-type2').addEventListener("touchstart", function(e) {
//			console.log("ping");
			state = true;
			document.querySelector('.distroy-house').innerHTML = '房屋倒损评估 ';

			if(state) {
				$('#img-btn-type2').css('backgroundPosition', '-75px -124px');
				$('#img-btn-type3').css('backgroundPosition', '-112px -82px');
				for(var i = 0; i < Option.length; i++) {
					if(Option[i]) {
						myChart[i].setOption(Option[i]);
					}

				}

			}
			e.stopPropagation();
			if(arr[0]) {
				assessbuilding.html(html);
			} else {
				html1 = '<div class="flex-box">' +
					'<div class="first-item">' + 0 + '</div>' +
					'<div class="second-item">' + 0 + '</div>' +
					'<div class="third-item">' + 0 + '</div>' +
					'<div class="fourth-item">' + 0 + '</div>' +
					'</div>';
				assessbuilding.html(html1);
			}
		});
		if($('#item2mobile').hasClass('mui-active')) {
			return;
		}
		$('.leaflet-echart-icon').hide();
		$('.echartssymbol').hide();
	});
}

//获取灾区历史地震
function getHistEarth(id) {
	n2.ajax.post('http://' + n2.getHistEarth, {
		"kind_code": "01",
		"product_code": "0018",
		"id": id
	}, 'json').then(function(res) {
		var res = JSON.parse(res);
		//		console.log(res);
		var histearth = $('.histearth');
		var html = "";
		histearth.html("");
		for(var i = 0; i < res[0]['HistEarth'].length; i++) {
			if(typeof(res[0]['HistEarth'][i].EarthquakeBureau) == 'object') {
				if(res[0]['HistEarth'][i].happenTime == undefined){
					res[0]['HistEarth'][i].happenTime = "无";
				}
				if(res[0]['HistEarth'][i].location == undefined){
					res[0]['HistEarth'][i].location = "无";
				}
				if(res[0]['HistEarth'][i].lat == undefined){
					res[0]['HistEarth'][i].lat = "无";
				}
				if(res[0]['HistEarth'][i].lon == undefined){
					res[0]['HistEarth'][i].lon = "无";
				}
				
				if(res[0]['HistEarth'][i].mag == undefined){
					res[0]['HistEarth'][i].mag = "无";
				}
				if(res[0]['HistEarth'][i].depth == undefined){
					res[0]['HistEarth'][i].depth = "无";
				}
				var happenTime = res[0]['HistEarth'][i].happenTime;
				$('.histearth').after('<tr class="info-item-green" style="border-bottom:1px solid #dedede;">' +
					'<td class="first-item-td">' + happenTime.substr(0, happenTime.length - 5).replace(/T/g, "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;") + '</td>' +
					'<td class="second-item-td"><p>' + res[0]['HistEarth'][i].location + '</p></td>' +
					'<td class="third-item-td">' + res[0]['HistEarth'][i].lat + '</td>' +
					'<td class="fourth-item-td">' + res[0]['HistEarth'][i].lon + '</td>' +
					'<td class="five-item-td">' + res[0]['HistEarth'][i].mag + '</td>' +
					'<td class="six-item-td">' + res[0]['HistEarth'][i].depth + '</td>' +
					'</tr>');

				var EarthaffectedPop = res[0]['HistEarth'][i]['EarthquakeBureau'][0].affectedPop;
				var EarthcollOrSevere = res[0]['HistEarth'][i]['EarthquakeBureau'][0].collOrSevere;
				var EarthdeadPop = res[0]['HistEarth'][i]['EarthquakeBureau'][0].deadPop;
				var EarthGeneral = res[0]['HistEarth'][i]['EarthquakeBureau'][0].General;
				var EarthEmergTranPop = res[0]['HistEarth'][i]['EarthquakeBureau'][0].EmergTranPop;
				var EarthDirectLoss = res[0]['HistEarth'][i]['EarthquakeBureau'][0].DirectLoss;

				var MiniaffectedPop = res[0]['HistEarth'][i]['Ministry'][0].affectedPop;
				var MinicollOrSevere = res[0]['HistEarth'][i]['Ministry'][0].collOrSevere;
				var MinideadPop = res[0]['HistEarth'][i]['Ministry'][0].deadPop;
				var MiniGeneral = res[0]['HistEarth'][i]['Ministry'][0].General;
				var MiniEmergTranPop = res[0]['HistEarth'][i]['Ministry'][0].EmergTranPop;
				var MiniDirectLoss = res[0]['HistEarth'][i]['Ministry'][0].DirectLoss;

				var Ministry = [MiniaffectedPop, MinicollOrSevere, MinideadPop, MiniGeneral, MiniEmergTranPop, MiniDirectLoss];
				var EarthquakeBureau = [EarthaffectedPop, EarthcollOrSevere, EarthdeadPop, EarthGeneral, EarthEmergTranPop, EarthDirectLoss];

				var infoItemGreenArray = document.querySelectorAll('.info-item-green');
				//				console.log(infoItemGreenArray.length);

				csm.addEventListener('touchstart', function(event) { //body上的触摸事件

					if(event.target.id == 'civilAffairs') {
						$('.civilAffairs').addClass('activebtn');
						$('.earthquakeBureau').removeClass('activebtn');
						$('.info-content').find('span').each(function(i) {
							$(this).html(Ministry[i]);
						})
					}
					if(event.target.id == 'earthquakeBureau') {
						$('.earthquakeBureau').addClass('activebtn');
						$('.civilAffairs').removeClass('activebtn');
						$('.info-content').find('span').each(function(i) {
							$(this).html(EarthquakeBureau[i]);
						})
					}
				});
			}else{
				if(res[0]['HistEarth'][i].happenTime == undefined){
					res[0]['HistEarth'][i].happenTime = "无";
				}
				if(res[0]['HistEarth'][i].location == undefined){
					res[0]['HistEarth'][i].location = "无";
				}
				if(res[0]['HistEarth'][i].lat == undefined){
					res[0]['HistEarth'][i].lat = "无";
				}
				if(res[0]['HistEarth'][i].lon == undefined){
					res[0]['HistEarth'][i].lon = "无";
				}
				
				if(res[0]['HistEarth'][i].mag == undefined){
					res[0]['HistEarth'][i].mag = "无";
				}
				if(res[0]['HistEarth'][i].depth == undefined){
					res[0]['HistEarth'][i].depth = "无";
				}
				var happenTime = res[0]['HistEarth'][i].happenTime;
				$('.histearth').after('<tr info-item-default>' +
					'<td class="first-item-td">' + happenTime.substr(0, happenTime.length - 5).replace(/T/g, "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;") + '</td>' +
					'<td class="second-item-td"><p>' + res[0]['HistEarth'][i].location + '</p></td>' +
					'<td class="third-item-td">' + res[0]['HistEarth'][i].lat + '</td>' +
					'<td class="fourth-item-td">' + res[0]['HistEarth'][i].lon + '</td>' +
					'<td class="five-item-td">' + res[0]['HistEarth'][i].mag + '</td>' +
					'<td class="six-item-td">' + res[0]['HistEarth'][i].depth + '</td>' +
					'</tr>');
			}

		}

		var infoItemGreenArray = document.querySelectorAll('.info-item-green');
		for(var i = 0; i < infoItemGreenArray.length; i++) {
			infoItemGreenArray[i].addEventListener('tap', function() {
				if($(this).next('tr').hasClass('insert')) {
					$('.insert').remove();
					return;
				}
				$('.insert').remove();
				$(this).after('<tr class="insert"><td id="insetcontent" colspan="6">' +
					'<div class="top-switch">' +
					'<div class="civilAffairs activebtn" id="civilAffairs">民政部</div>' +
					'<div class="earthquakeBureau" id="earthquakeBureau">地震局</div>' +
					'</div>' +
					'<ul class="info-content">' +
					'<li>受灾人口:<span>2321人 </span></li>' +
					'<li>倒塌或严重损毁房屋:<span>321间</span></li>' +
					'<li>死亡人口:<span>5人</span></li>' +
					'<li>一般房屋损毁:<span>2324间</span></li>' +
					'<li>紧急转移人口:<span>2321万人</span></li>' +
					'<li>直接经济损失:<span>58万</span></li>' +
					'</ul></td></tr>');
				$('.info-content').find('span').each(function(i) {
					$(this).html(Ministry[i]);
				})
			});
		}
	});
}

//获取usgs
function getusgs(id) {
	n2.ajax.post('http://' + n2.getUSGS, {
		"kind_code": "01",
		"product_code": "0019",
		"id": id
	}, 'json').then(function(res) {
		var res = JSON.parse(res);
		//		console.log(res);
		//------经济损失
		res.eco1 = res[0].USGS.probDirectLoss['0-1'];
		res.eco10 = res[0].USGS.probDirectLoss['1-10'];
		res.eco100 = res[0].USGS.probDirectLoss['10-100'];
		res.eco1000 = res[0].USGS.probDirectLoss['100-1000'];
		res.eco10000 = res[0].USGS.probDirectLoss['1000-10000'];
		res.eco100000 = res[0].USGS.probDirectLoss['10000-100000'];
		res.ecomore = res[0].USGS.probDirectLoss['>100000'];
		//-----------死亡人数
		res.pop1 = res[0].USGS.probDeadPopNumb['0-1'];
		res.pop10 = res[0].USGS.probDeadPopNumb['1-10'];
		res.pop100 = res[0].USGS.probDeadPopNumb['10-100'];
		res.pop1000 = res[0].USGS.probDeadPopNumb['100-1000'];
		res.pop10000 = res[0].USGS.probDeadPopNumb['1000-10000'];
		res.pop100000 = res[0].USGS.probDeadPopNumb['10000-100000'];
		res.popmore = res[0].USGS.probDeadPopNumb['>100000'];

		$(".blank-1").html(res[0].USGS.mag);
		$('.blank-2').html(res[0].USGS.depth);
		$('.blank-3').html(toRoman(res[0].USGS.affectedPop[0].MaxIntensity));
		$('.blank-4').html(res[0].USGS.affectedPop[0].affectedPop);
		$('.blank-5').html(toRoman(res[0].USGS.affectedPop[1].Intensity));
		$('.blank-6').html(res[0].USGS.affectedPop[1].affectedPop);
		$('.blank-7').html(toRoman(res[0].USGS.affectedPop[2].Intensity));
		$('.blank-8').html(res[0].USGS.affectedPop[2].affectedPop);
		$('.blank-9').html(res[0].USGS.probDeadPop["0-1"] * 100);
		$('.blank-10').html(res[0].USGS.probDeadPop["1-10"] * 100);
		$('.blank-11').html(res[0].USGS.probDeadPop[">10"] * 100);
		//usgu评估报表      echart实现
		//usgu配色表
		var ugColor = ["#006400", "#E0E028", "#FFFF00", "#FFFF00", "#FF0000", "#FF0000", "#FF0000"];
		var dataP = null;
		var dataL = null;
		var dataPbu = null;
		var dataLbu = null;
		(function(res) {
			//将eco1---ecomore数据按顺序导入成数组     ------   经济损失
			var data = [];
			// var eco1 =
			data.push(res.eco1 * 100 == 0 ? '' : res.eco1 * 100);
			data.push(res.eco10 * 100 == 0 ? '' : res.eco10 * 100);
			data.push(res.eco100 * 100 == 0 ? '' : res.eco100 * 100);
			data.push(res.eco1000 * 100 == 0 ? '' : res.eco1000 * 100);
			data.push(res.eco10000 * 100 == 0 ? '' : res.eco10000 * 100);
			data.push(res.eco100000 * 100 == 0 ? '' : res.eco100000 * 100);
			data.push(res.ecomore * 100 == 0 ? '' : res.ecomore * 100);

			dataP = data;
			dataPbu = [100 - dataP[0]];

			//console.log(dataP,dataPbu)

			//找到最大值的索引
			var index = data.indexOf(Math.max.apply(Math, data));

			//取出配色表相对应的索引颜色---用于填充圆的颜色
			var phColor = ugColor[index];

			var canvas = document.querySelector("#mycanvas1");
			//自己定义的原始canvas大小
			var oldWidth = 150;
			var oldHeight = 150;
			var ctx = canvas.getContext("2d");
			//准备工作
			var devicePixelRatio = window.devicePixelRatio || 1,
				backingStoreRatio = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1,
				ratio = devicePixelRatio / backingStoreRatio;
			canvas.width = oldWidth * ratio;
			canvas.height = oldHeight * ratio;
			canvas.style.width = oldWidth + 'px';
			canvas.style.height = oldHeight + 'px';
			ctx.scale(ratio, ratio);
			//中心点位画圆
			var x = 45;
			var y = 90;
			var r = 40;
			ctx.beginPath();
			ctx.arc(x, y, r, 0, 2 * Math.PI);
			ctx.lineWidth = 4;
			ctx.strokeStyle = '#000000';
			ctx.stroke();
			ctx.fillStyle = phColor;
			ctx.fill();

			// 基于准备好的dom，初始化echarts实例
			myChart1 = echarts.init(document.getElementById('mychartL'));
			//标尺配色表  --   虽然来的数据可能没有配色表那么多，不影响，取色从左到右
			var color = ["#006400", "#E0E028", "#FFFF00", "#FFFF00", "#FF0000", "#FF0000", "#FF0000"];
			//根据来的数据判断几个柱状图：原则是有几组数据则画出几个柱状图
			var option = {
				tooltip: {
					show: false //关闭提示
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: [
					//由于我们的柱状图是堆积的，且从0开始，所以我们的x类别只能为category，参数从数据中获得
					{ //第一个横轴决定显示几个类，即几个柱子
						show: true,
						type: 'category',
						position: 'bottom',
						// name:'经济损失估计（美元）',
						// nameLocation:'start',
						axisTick: { //标签刻度的设置
							length: 10,
							show: true
						},
						axisLabel: {
							textStyle: {
								// align:'left',
								baseline: 'top',
								fontSize: 12,
								fontWeight: 'bold',

							},
							margin: 20,
							interval: 0
						},
						data: ['           1', '              10', '             100', '            1000', '             1万', '             10万', '   ']
					}

				],
				yAxis: [{
					show: false,
					type: 'value'
				}],
				series: [{
						name: '提示', //标尺  -----   高度固定      宽度由数据组数的多少确定
						type: 'bar',
						stack: '广告',
						itemStyle: {
							normal: {
								//好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
								color: function(params) {
									// build a color map as your need.
									var colorList = color;

									return colorList[params.dataIndex]
								},
								borderColor: '#000000',
								borderWidth: 1
								//以下为是否显示，显示位置和显示格式的设置了

							}
						},
						//设置柱的宽度，要是数据太少，柱子太宽不美观~
						barWidth: '100%',
						data: [10, 10, 10, 10, 10, 10, 10]

					},
					{
						name: '', //留白，模拟空隙
						type: 'bar',
						stack: '广告',
						itemStyle: {
							normal: {
								color: '#ffffff'
							}
						},
						data: [5, 5, 5, 5, 5, 5, 5]
					},
					{
						name: '百分比',
						type: 'bar',
						stack: '广告',
						itemStyle: {
							normal: {
								color: function(params) {
									var colorList = ["#006400", "#E0E028", "#FFFF00", "#FFFF00", "#FF0000", "#FF0000", "#FF0000"];

									return colorList[params.dataIndex]
								},
								borderColor: '#000000',
								borderWidth: 1,
								label: {
									show: true,
									position: 'top',
									formatter: '{c}%',
									textStyle: {
										color: '#000000',
										fontWeight: 'bold',
										fontSize: 12
									}
								}
							}
						},
						label: {
							textStyle: {
								color: '#000000',
								fontWeight: 'bold',
								fontSiz: 50
							}
						},
						data: dataP,
						barCategoryGap: 0,
						zlevel: 2
					},
					{ //第一行会填补上面未到100的值
						name: '',
						type: 'bar',
						stack: '广告',
						itemStyle: {
							normal: {
								color: '#FFA903',
								borderColor: '#000000',
								borderWidth: 1,
							}
						},
						data: dataPbu, //这是最大的一个数据的补足部分
						barCategoryGap: 0
						//                      barWidth:'30%'
					}
				]
			};

			// 使用刚指定的配置项和数据显示图表。
			myChart1.setOption(option);

		})(res);
		(function(res) {
			//将pop1--popmore数据按顺序导入成数组     --------  人口
			var data = [];
			data.push(res.pop1 * 100 == 0 ? '' : res.pop1 * 100);
			data.push(res.pop10 * 100 == 0 ? '' : res.pop10 * 100);
			data.push(res.pop100 * 100 == 0 ? '' : res.pop100 * 100);
			data.push(res.pop1000 * 100 == 0 ? '' : res.pop1000 * 100);
			data.push(res.pop10000 * 100 == 0 ? '' : res.pop10000 * 100);
			data.push(res.pop100000 * 100 == 0 ? '' : res.pop100000 * 100);
			data.push(res.popmore * 100 == 0 ? '' : res.popmore * 100);

			dataL = data;
			dataLbu = [100 - dataL[0]];
			//console.log(dataL,dataLbu)
			//找到最大值索引
			var index = data.indexOf(Math.max.apply(Math, data));
			var phColor = ugColor[index];

			var canvas = document.querySelector("#mycanvas2");
			//自己定义的原始canvas大小
			var oldWidth = 150;
			var oldHeight = 150;
			var ctx = canvas.getContext("2d");
			//准备工作
			var devicePixelRatio = window.devicePixelRatio || 1,
				backingStoreRatio = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1,
				ratio = devicePixelRatio / backingStoreRatio;
			canvas.width = oldWidth * ratio;
			canvas.height = oldHeight * ratio;
			canvas.style.width = oldWidth + 'px';
			canvas.style.height = oldHeight + 'px';
			ctx.scale(ratio, ratio);
			//中心点位画圆
			var x = 45;
			var y = 90;
			var r = 40;
			ctx.beginPath();
			ctx.arc(x, y, r, 0, 2 * Math.PI);
			ctx.lineWidth = 4;
			ctx.strokeStyle = '#000000';
			ctx.stroke();
			ctx.fillStyle = phColor;
			ctx.fill();
			myChart2 = echarts.init(document.getElementById('mychartp'));

			//标尺配色表  --   虽然来的数据可能没有配色表那么多，不影响，取色从左到右
			var color = ["#006400", "#E0E028", "#FFFF00", "#FFFF00", "#FF0000", "#FF0000", "#FF0000"];

			//根据来的数据判断几个柱状图：原则是有几组数据则画出几个柱状图

			var options = {
				tooltip: {
					show: false //关闭提示
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: [
					//由于我们的柱状图是堆积的，且从0开始，所以我们的x类别只能为category，参数从数据中获得
					{ //第一个横轴决定显示几个类，即几个柱子
						show: true,
						type: 'category',
						position: 'bottom',
						// name:'经济损失估计（美元）',
						// nameLocation:'start',
						axisTick: { //标签刻度的设置
							length: 10,
							show: true
						},
						axisLabel: {
							textStyle: {
								// align:'left',
								baseline: 'top',
								fontSize: 12,
								fontWeight: 'bold'
							},
							interval: 0,
							margin: 20
						},
						data: ['           1', '              10', '             100', '            1000', '             1万', '             10万', '   ']
						//                        data: ['                     1', '                      10', '                     100', '                1000', '                   10000', '                100000', '   ']
						// data : ['           1','       10','      100','      1000','      10000','     100000','      1000000']
					}

				],
				yAxis: [{
					show: false,
					type: 'value'
				}],
				series: [{
						name: '提示', //标尺  -----   高度固定      宽度由数据组数的多少确定
						type: 'bar',
						stack: '广告',
						itemStyle: {
							normal: {
								//好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
								color: function(params) {
									// build a color map as your need.
									var colorList = color;

									return colorList[params.dataIndex]
								},
								borderColor: '#000000',
								borderWidth: 1
								//以下为是否显示，显示位置和显示格式的设置了

							}
						},
						//设置柱的宽度，要是数据太少，柱子太宽不美观~
						barWidth: '100%',
						data: [10, 10, 10, 10, 10, 10, 10]

					},
					{
						name: '', //留白，模拟空隙
						type: 'bar',
						stack: '广告',
						itemStyle: {
							normal: {
								color: '#ffffff'
							}
						},
						data: [5, 5, 5, 5, 5, 5, 5]
					},
					{
						name: '百分比',
						type: 'bar',
						stack: '广告',
						itemStyle: {
							normal: {
								color: function(params) {
									var colorList = ["#006400", "#E0E028", "#FFFF00", "#FFFF00", "#FF0000", "#FF0000", "#FF0000"];

									return colorList[params.dataIndex]
								},
								borderColor: '#000000',
								borderWidth: 1,
								label: {
									show: true,
									position: 'top',
									formatter: '{c}%',
									textStyle: {
										color: '#000000',
										fontWeight: 'bold',
										fontSize: 12
									}
								}
							}
						},
						label: {
							textStyle: {
								color: '#000000',
								fontWeight: 'bold',
								fontSiz: 50
							}
						},
						data: dataL,
						barCategoryGap: 0,
						zlevel: 2
					},
					{ //第一行会填补上面未到100的值
						name: '',
						type: 'bar',
						stack: '广告',
						itemStyle: {
							normal: {
								show: true,
								color: '#FFA903',
								borderColor: '#000000',
								borderWidth: 1
							}
						},
						data: dataLbu, //这是最大的一个数据的补足部分
						barCategoryGap: 0
						// barWidth:'30%'
					}
				]
			};
			// 使用刚指定的配置项和数据显示图表。
			myChart2.setOption(options);
		})(res);
	});
}

//数字转化为罗马数字

function toRoman(num) {
	if(isNaN(num)) return num;

	var a = [
		["", "I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX"],
		["", "X", "XX", "XXX", "XL", "L", "LX", "LXX", "LXXX", "XCC"],
		["", "C", "CC", "CCC", "CD", "D", "DC", "DCC", "DCCC", "CM"]
	];
	var roman = "";
	var t = 0;
	for(var m = 0, i = 1000; m < 3; m++, i /= 10) {
		t = Math.floor((num % i) / (i / 10));
		roman += a[2 - m][t];
	}
	return roman;
}

/*
 灾区情况专题
 * 
 * */
// var firstChart = null;
// var myChartss = null;
// var myChart = null;
// var myChart2 = null;

// //周边城市烈度图     图上展示地震点
// function intensityMap(id) {
//
//     n2.ajax.get('http://59.173.238.36:10040/api/EQ_geoJsonMap', {
//         eq_ID: id
//     }, '').then(function (res) {
//
//
//         var res = JSON.parse(res);
//         var geojson = res.geo;
//         var positionObj = res.posiArr;
//
//         var positionArr = positionObj.distances;
//         var poLength = positionArr.length;
//         var dataS = [];
//         for (var i = 0; i < poLength; i++) {
//             var posi = positionArr[i].coordinates;
//             dataS.push({
//                 name: positionArr[i].city,
//                 value: [posi[0], posi[1], 8, positionArr[i].distance]
//             })
//         }
//
//
//         firstChart = echarts.init(document.getElementById('firstChart'));
//
//         echarts.registerMap('intensityMaps', geojson);
//
//         firstChart.setOption({
//             tooltip: {
//                 trigger: 'item',
//                 formatter: function (params) {
//                     return params.name + '<br/>' + '震中距离：' + params.value[3] + 'km' + "<br/>" + '所在烈度区：' + toRoman(5);   //<br/>   换行
//                 }
//             },
//             geo: {
//                 map: 'intensityMaps',
//                 label: {
//                     normal: {
//                         show: true
//                     },
//                     emphasis: {
//                         show: false
//                     }
//                 },
//                 itemStyle: {
//                     normal: {
//                         areaColor: '#FEF2AB',  //地图底色
//                         borderColor: '#111',
//                         opacity: 0.5   //透明度
//                     },
//                     emphasis: {
//                         areaColor: '#FEF2AB' //点击高亮颜色
//                     }
//                 },
//                 z: 1
//             },
//             series: [{
//                 type: 'scatter',
//                 coordinateSystem: 'geo',
//                 data: dataS,
//                 z: 2
//             }, {
//                 type: 'map',
//                 map: 'hetian',
//                 z: 0,
//                 silent: true,
//                 label: {
//                     normal: true
//                 }
//             }]
//         })
//
//
//     })
// }
//
// //周边城市表格
// function AroundCity(id) {
//
//
//     n2.ajax.get('http://' + n2.disaster, {eq_ID: id}, '').then(function (res) {
//
//         var res = JSON.parse(res);
//         //表格
//         var dismessage = res.docsArr;
//         var disLength = dismessage.length;
//         var tbody1 = document.querySelector('#xianBody');
//         tbody1.innerHTML = '';   //每次传值并重新得到信息
//         for (var i = 1; i <= disLength; i++) {
//             var tr = document.createElement('tr');
//             var td1 = document.createElement('td');
//             td1.innerHTML = dismessage[i - 1].administrativeName;
//             tr.appendChild(td1);
//             //所在烈度区
//             var td2 = document.createElement('td');
//             //td2.value = dismessage[i].city;   //暂时无数据
//             td2.innerHTML = toRoman(dismessage[i - 1].Intensity);
//             tr.appendChild(td2);
//             //距离
//             var td3 = document.createElement('td');
//             td3.innerHTML = dismessage[i - 1].distance;
//             tr.appendChild(td3);
//             tbody1.appendChild(tr)
//         }
//     })
// }
//
//
// //人口密度   暂无   只是贴一张图
// function populationDensity(id) {
//
// }
//
//
// //房屋结构
// function buildingStructure(id) {
//
// //	n2.ajax.get('http://'+n2.building,{eq_ID:id},'').then(function(res){
//     //房屋结构图      -------    利用echart实现      -------------    由于写在mui.plusReady里面只能真机运行才可以显示
//     // 基于准备好的dom，初始化echarts实例
//     var color = ["#C1232B", "#B5C334", "#FCCE10", "#E87C25"];
//     myChartss = echarts.init(document.getElementById('mains'));
//     var optionss = {
//         title: {
//             text: '房屋结构(间)'
//         },
//         tooltip: {
//             trigger: 'axis'
//         },
//         legend: {
//             data: []
//         },    //右上方工具栏
//         toolbox: {
//             itemSize: 30,
//             show: false,   //开关工具栏
//             feature: {
//                 dataView: {show: true, readOnly: true},
//                 magicType: {show: true, type: ['line', 'bar']},
//                 restore: {show: true},
//                 saveAsImage: {show: false}   //默认为true，手机上不能保存图片，改为false
//             },
//             right: '10%'
//         },
//         calculable: true,
//         xAxis: [
//             {
//                 type: 'category',
//                 data: ['砖木', '钢混', '砖混', '其他'],
//                 name: '类型'
//             }
//         ],
//         yAxis: [
//             {
//                 type: 'value'
//             }
//         ],
//         series: [
//             {
//                 name: '数量',
//                 type: 'bar',
//                 itemStyle: {
//                     normal: {
//                         //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
//                         color: function (params) {
//                             // build a color map as your need.
//                             var colorList = color;
//
//                             return colorList[params.dataIndex]
//                         },
//                         //以下为是否显示，显示位置和显示格式的设置了
//                         label: {
//                             show: true,
//                             position: 'top',
//                             formatter: '{c}'
//                         }
//                     }
//                 },
//                 //设置柱的宽度，要是数据太少，柱子太宽不美观~
//                 barWidth: 70,
//                 data: [28, 15, 9, 4]
//             }
//         ]
//     };
//
//     // 使用刚指定的配置项和数据显示图表。
//     myChartss.setOption(optionss);
//
//
//     //房屋结构表
// //	})
//
// }
//
//
// //损失评估  暂时无
// function lossAssessment(id) {
//
//     n2.ajax.get('http://' + n2.Loss, {eq_ID: id}, '').then(function (res) {
//
//         var res = JSON.parse(res);
//
//         //灾区概况
//         var assessmentInfo = res.assessmentInfo;
//         document.getElementById('lossInfo').innerHTML = assessmentInfo;
//
//         //上报区域暂时无
//
//
//         //房屋倒损统计
//         //信息盒子
//         var tbody3 = document.querySelector('.tbody3');
//         tbody3.innerHTML = '';
//         var allCity = res.intensityAnalyze;   //所有区域的数组
//         var cityLength = allCity.length;
//         for (var i = 0; i < cityLength; i++) {
//
//             var dead = allCity[i].hitPopulation.dead;
//             var injured = allCity[i].hitPopulation.injured;
//             var transfer = allCity[i].hitPopulation.transfer;
//
//             var locaName = allCity[i].hitBuilding[0].administrativeName
//             var collapsed = allCity[i].hitBuilding[0].collapsed;   		 //房屋倒塌
//             var generalDamage = allCity[i].hitBuilding[0].generalDamage   //一般房屋
//             var severeDamage = allCity[i].hitBuilding[0].severeDamage    //严重损失
//             var sumBuilding = allCity[i].hitBuilding[0].sumBuilding    // 总和
//
//
//             var index = i % 2;
//             if (index === 0) {   //偶数
//                 var tr = document.createElement('tr');
//                 tr.className = 'danger';
//             } else {			//奇数
//                 //地名
//                 var tr = document.createElement('tr');
//                 tr.className = 'info';
//             }
//
//             var td1 = document.createElement('td');
//             td1.innerHTML = locaName;
//             tr.appendChild(td1);
//
//             var td2 = document.createElement('td');
//             td2.innerHTML = injured;
//             tr.appendChild(td2);
//
//             var td3 = document.createElement('td');
//             td3.innerHTML = dead;
//             tr.appendChild(td3);
//
//             var td4 = document.createElement('td');
//             td4.innerHTML = transfer;
//             tr.appendChild(td4);
//
//             var td5 = document.createElement('td');
//             td5.innerHTML = collapsed;
//             tr.appendChild(td5);
//
//             var td6 = document.createElement('td');
//             td6.innerHTML = severeDamage;
//             tr.appendChild(td6);
//
//             var td7 = document.createElement('td');
//             td7.innerHTML = generalDamage;
//             tr.appendChild(td7);
//
//
//             tbody3.appendChild(tr)
//
//         }
//
//
//     })
// }
//
// //历史地震
//
//
// function histories(id) {
//
//     //历史地震table表
//     n2.ajax.get('http://' + n2.history, {eq_ID: id}, '').then(function (res) {
//
//         var res = JSON.parse(res);
//         // var resObj = res[0];
//         var tbody2 = document.querySelector('.tbody2');
//         tbody2.innerHTML = '';
//         var leng = res.length;
//         for (var i = 0; i < leng; i++) {
//             //历史地震地名
//             var name = res[i].position.county;
//             //历史地震时间
//             var os = res[i].happenTime;
//             var dt = new Date(os);   //得到中国时间
//             var year = dt.getFullYear();
//             var month = dt.getMonth() + 1;
//             var day = dt.getDate();
//             var data = year + '-' + month + '-' + day;
//             //震级
//             var mag = res[i].mag;
//             var index = i % 2;
//             if (index === 0) {   //偶数
//                 var tr = document.createElement('tr');
//                 tr.className = 'danger';
//             } else {			//奇数
//                 //地名
//                 var tr = document.createElement('tr');
//                 tr.className = 'info';
//             }
//             var td1 = document.createElement('td');
//             td1.innerHTML = name;
//
//             tr.appendChild(td1);
//             //所在烈度区
//             var td2 = document.createElement('td');
//             //td2.value = dismessage[i].city;   //暂时无数据
//             td2.innerHTML = data;
//             tr.appendChild(td2);
//             //距离
//             var td3 = document.createElement('td');
//             td3.innerHTML = mag;
//             tr.appendChild(td3);
//
//             tbody2.appendChild(tr)
//         }
//     })
//
// }
//
//
// /*USGS*/
// function USGSph(id) {
//     //n2.ajax.get('http://59.173.238.36:10040/api/EQ_USGS', {eq_ID: id}, '').then(function (res) {
//        // var res = JSON.parse(res);
//         var res={};
//         res.eco1=1;
//         res.eco10=10;
//         res.eco10=2;
//         res.eco100=1;
//         res.eco1000=15;
//         res.eco10000=6;
//         res.eco100000=5;
//         res.ecomore=34;
//         //usgu评估报表      echart实现
//         //usgu配色表
//         var ugColor = ["#006400", "#E0E028", "#FFFF00", "#FFFF00", "#FF0000", "#FF0000", "#FF0000"];
//
//         var dataP = null;
//         var dataL = null;
//         var dataPbu = null;
//         var dataLbu = null;
//
//         (function (res) {
//             //将eco1---ecomore数据按顺序导入成数组     ------   经济损失
//             var data = [];
//             // var eco1 =
//             data.push(res.eco1 * 100 == 0 ? '' : res.eco1 * 100);
//             data.push(res.eco10 * 100 == 0 ? '' : res.eco10 * 100);
//             data.push(res.eco100 * 100 == 0 ? '' : res.eco100 * 100);
//             data.push(res.eco1000 * 100 == 0 ? '' : res.eco1000 * 100);
//             data.push(res.eco10000 * 100 == 0 ? '' : res.eco10000 * 100);
//             data.push(res.eco100000 * 100 == 0 ? '' : res.eco100000 * 100);
//             data.push(res.ecomore * 100 == 0 ? '' : res.ecomore * 100);
//
//
//             dataP = data;
//             dataPbu = [100 - dataP[0]];
//
//             //console.log(dataP,dataPbu)
//
//             //找到最大值的索引
//             var index = data.indexOf(Math.max.apply(Math, data));
//
//
//             //取出配色表相对应的索引颜色---用于填充圆的颜色
//             var phColor = ugColor[index];
//
//             var canvas = document.querySelector("#mycanvas1");
//             //自己定义的原始canvas大小
//             var oldWidth = 150;
//             var oldHeight = 150;
//             var ctx = canvas.getContext("2d");
//             //准备工作
//             var devicePixelRatio = window.devicePixelRatio || 1,
//                 backingStoreRatio = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1,
//                 ratio = devicePixelRatio / backingStoreRatio;
//             canvas.width = oldWidth * ratio;
//             canvas.height = oldHeight * ratio;
//             canvas.style.width = oldWidth + 'px';
//             canvas.style.height = oldHeight + 'px';
//             ctx.scale(ratio, ratio);
//             //中心点位画圆
//             var x = 45;
//             var y = 90;
//             var r = 40;
//             ctx.beginPath();
//             ctx.arc(x, y, r, 0, 2 * Math.PI);
//             ctx.lineWidth = 4;
//             ctx.strokeStyle = '#000000';
//             ctx.stroke();
//             ctx.fillStyle = phColor;
//             ctx.fill();
//
//
//             // 基于准备好的dom，初始化echarts实例
//             myChart = echarts.init(document.getElementById('mychartp'));
//             //标尺配色表  --   虽然来的数据可能没有配色表那么多，不影响，取色从左到右
//             var color = ["#006400", "#E0E028", "#FFFF00", "#FFFF00", "#FF0000", "#FF0000", "#FF0000"];
//             //根据来的数据判断几个柱状图：原则是有几组数据则画出几个柱状图
//             var option = {
//                 tooltip: {
//                     show: false     //关闭提示
//                 },
//                 grid: {
//                     left: '3%',
//                     right: '4%',
//                     bottom: '3%',
//                     containLabel: true
//                 },
//                 xAxis: [
//                     //由于我们的柱状图是堆积的，且从0开始，所以我们的x类别只能为category，参数从数据中获得
//                     {   //第一个横轴决定显示几个类，即几个柱子
//                         show: true,
//                         type: 'category',
//                         position: 'bottom',
//                         // name:'经济损失估计（美元）',
//                         // nameLocation:'start',
//                         axisTick: {     //标签刻度的设置
//                             length: 10,
//                             show: true
//                         },
//                         axisLabel: {
//                             textStyle: {
//                                 // align:'left',
//                                 baseline: 'top',
//                                 fontSize: 8,
//                                 fontWeight: 'bold',
//
//                             },
//                             margin: 20,
//                             interval: 0
//                         },
//                         data: ['                     1', '                      10', '                     100', '                1000', '                   10000', '                 100000', '   ']
//                     }
//
//                 ],
//                 yAxis: [
//                     {
//                         show: false,
//                         type: 'value'
//                     }
//                 ],
//                 series: [
//                     {
//                         name: '提示',   //标尺  -----   高度固定      宽度由数据组数的多少确定
//                         type: 'bar',
//                         stack: '广告',
//                         itemStyle: {
//                             normal: {
//                                 //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
//                                 color: function (params) {
//                                     // build a color map as your need.
//                                     var colorList = color;
//
//                                     return colorList[params.dataIndex]
//                                 },
//                                 borderColor: '#000000',
//                                 borderWidth: 1
//                                 //以下为是否显示，显示位置和显示格式的设置了
//
//                             }
//                         },
//                         //设置柱的宽度，要是数据太少，柱子太宽不美观~
//                         barWidth: '100%',
//                         data: [10, 10, 10, 10, 10, 10, 10]
//
//                     },
//                     {
//                         name: '',     //留白，模拟空隙
//                         type: 'bar',
//                         stack: '广告',
//                         itemStyle: {
//                             normal: {
//                                 color: '#ffffff'
//                             }
//                         },
//                         data: [5, 5, 5, 5, 5, 5, 5]
//                     },
//                     {
//                         name: '百分比',
//                         type: 'bar',
//                         stack: '广告',
//                         itemStyle: {
//                             normal: {
//                                 color: function (params) {
//                                     var colorList = ["#006400", "#E0E028", "#FFFF00", "#FFFF00", "#FF0000", "#FF0000", "#FF0000"];
//
//                                     return colorList[params.dataIndex]
//                                 },
//                                 borderColor: '#000000',
//                                 borderWidth: 1,
//                                 label: {
//                                     show: true,
//                                     position: 'top',
//                                     formatter: '{c}%',
//                                     textStyle: {
//                                         color: '#000000',
//                                         fontWeight: 'bold',
//                                         fontSize: 12
//                                     }
//                                 }
//                             }
//                         },
//                         label: {
//                             textStyle: {
//                                 color: '#000000',
//                                 fontWeight: 'bold',
//                                 fontSiz: 50
//                             }
//                         },
//                         data: dataP,
//                         barCategoryGap: 0,
//                         zlevel: 2
//                     },
//                     {   //第一行会填补上面未到100的值
//                         name: '',
//                         type: 'bar',
//                         stack: '广告',
//                         itemStyle: {
//                             normal: {
//                                 color: '#FFA903',
//                                 borderColor: '#000000',
//                                 borderWidth: 1,
//                             }
//                         },
//                         data: dataPbu,     //这是最大的一个数据的补足部分
//                         barCategoryGap: 0
//                         // barWidth:'30%'
//                     }
//                 ]
//             };
//
//
//             // 使用刚指定的配置项和数据显示图表。
//             myChart.setOption(option);
//
//
//         })(res)
//
//         //将pop1--popmore数据按顺序导入成数组     --------  人口
//         var data = [];
//         data.push(res.pop1 * 100 == 0 ? '' : res.pop1 * 100);
//         data.push(res.pop10 * 100 == 0 ? '' : res.pop10 * 100);
//         data.push(res.pop100 * 100 == 0 ? '' : res.pop100 * 100);
//         data.push(res.pop1000 * 100 == 0 ? '' : res.pop1000 * 100);
//         data.push(res.pop10000 * 100 == 0 ? '' : res.pop10000 * 100);
//         data.push(res.pop100000 * 100 == 0 ? '' : res.pop100000 * 100);
//         data.push(res.popmore * 100 == 0 ? '' : res.popmore * 100);
//
//         dataL = data;
//         dataLbu = [100 - dataL[0]];
//         //console.log(dataL,dataLbu)
//         //找到最大值索引
//         var index = data.indexOf(Math.max.apply(Math, data));
//         var phColor = ugColor[index];
//
//         var canvas = document.querySelector("#mycanvas2");
//         //自己定义的原始canvas大小
//         var oldWidth = 150;
//         var oldHeight = 150;
//         var ctx = canvas.getContext("2d");
//         //准备工作
//         var devicePixelRatio = window.devicePixelRatio || 1,
//             backingStoreRatio = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1,
//             ratio = devicePixelRatio / backingStoreRatio;
//         canvas.width = oldWidth * ratio;
//         canvas.height = oldHeight * ratio;
//         canvas.style.width = oldWidth + 'px';
//         canvas.style.height = oldHeight + 'px';
//         ctx.scale(ratio, ratio);
//         //中心点位画圆
//         var x = 45;
//         var y = 90;
//         var r = 40;
//         ctx.beginPath();
//         ctx.arc(x, y, r, 0, 2 * Math.PI);
//         ctx.lineWidth = 4;
//         ctx.strokeStyle = '#000000';
//         ctx.stroke();
//         ctx.fillStyle = phColor;
//         ctx.fill();
//         myChart2 = echarts.init(document.getElementById('mychartL'));
//
//         //标尺配色表  --   虽然来的数据可能没有配色表那么多，不影响，取色从左到右
//         var color = ["#006400", "#E0E028", "#FFFF00", "#FFFF00", "#FF0000", "#FF0000", "#FF0000"];
//
//         //根据来的数据判断几个柱状图：原则是有几组数据则画出几个柱状图
//
//         var options = {
//             tooltip: {
//                 show: false     //关闭提示
//             },
//             grid: {
//                 left: '3%',
//                 right: '4%',
//                 bottom: '3%',
//                 containLabel: true
//             },
//             xAxis: [
//                 //由于我们的柱状图是堆积的，且从0开始，所以我们的x类别只能为category，参数从数据中获得
//                 {   //第一个横轴决定显示几个类，即几个柱子
//                     show: true,
//                     type: 'category',
//                     position: 'bottom',
//                     // name:'经济损失估计（美元）',
//                     // nameLocation:'start',
//                     axisTick: {     //标签刻度的设置
//                         length: 2,
//                         show: true
//                     },
//                     axisLabel: {
//                         textStyle: {
//                             // align:'left',
//                             baseline: 'top',
//                             fontSize: 5,
//                             fontWeight: 'bold'
//                         },
//                         interval: 0,
//                         margin: 20
//                     },
//                     data: ['                     1', '                      10', '                     100', '                1000', '                   10000', '                100000', '   ']
//                     // data : ['           1','       10','      100','      1000','      10000','     100000','      1000000']
//                 }
//
//             ],
//             yAxis: [
//                 {
//                     show: false,
//                     type: 'value'
//                 }
//             ],
//             series: [
//                 {
//                     name: '提示',   //标尺  -----   高度固定      宽度由数据组数的多少确定
//                     type: 'bar',
//                     stack: '广告',
//                     itemStyle: {
//                         normal: {
//                             //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
//                             color: function (params) {
//                                 // build a color map as your need.
//                                 var colorList = color;
//
//                                 return colorList[params.dataIndex]
//                             },
//                             borderColor: '#000000',
//                             borderWidth: 1
//                             //以下为是否显示，显示位置和显示格式的设置了
//
//                         }
//                     },
//                     //设置柱的宽度，要是数据太少，柱子太宽不美观~
//                     barWidth: '100%',
//                     data: [10, 10, 10, 10, 10, 10, 10]
//
//                 },
//                 {
//                     name: '',     //留白，模拟空隙
//                     type: 'bar',
//                     stack: '广告',
//                     itemStyle: {
//                         normal: {
//                             color: '#ffffff'
//                         }
//                     },
//                     data: [5, 5, 5, 5, 5, 5, 5]
//                 },
//                 {
//                     name: '百分比',
//                     type: 'bar',
//                     stack: '广告',
//                     itemStyle: {
//                         normal: {
//                             color: function (params) {
//                                 var colorList = ["#006400", "#E0E028", "#FFFF00", "#FFFF00", "#FF0000", "#FF0000", "#FF0000"];
//
//                                 return colorList[params.dataIndex]
//                             },
//                             borderColor: '#000000',
//                             borderWidth: 1,
//                             label: {
//                                 show: true,
//                                 position: 'top',
//                                 formatter: '{c}%',
//                                 textStyle: {
//                                     color: '#000000',
//                                     fontWeight: 'bold',
//                                     fontSize: 12
//                                 }
//                             }
//                         }
//                     },
//                     label: {
//                         textStyle: {
//                             color: '#000000',
//                             fontWeight: 'bold',
//                             fontSiz: 50
//                         }
//                     },
//                     data: dataL,
//                     barCategoryGap: 0,
//                     zlevel: 2
//                 },
//                 {   //第一行会填补上面未到100的值
//                     name: '',
//                     type: 'bar',
//                     stack: '广告',
//                     itemStyle: {
//                         normal: {
//                             color: '#FFA903',
//                             borderColor: '#000000',
//                             borderWidth: 1,
//                         }
//                     },
//                     data: dataLbu,     //这是最大的一个数据的补足部分
//                     barCategoryGap: 0
//                     // barWidth:'30%'
//                 }
//             ]
//         };
//         // 使用刚指定的配置项和数据显示图表。
//         myChart2.setOption(options);
//     //})
// }